<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
    var canvas=document.querySelector("#canvas");
    var ctx=canvas.getContext("2d");


    //大圆的圆心的x轴
    var bigX=400;
    //大圆的圆心的y轴
    var bigY=300;
    //大圆的半径
    var bigRadius=150;
    //小圆的半径
    var smallRadius=5;

    ctx.arc(bigX,bigY,bigRadius,0,2*Math.PI);
    ctx.stroke();

    drawSmallCircles(ctx,bigX,bigY,bigRadius,smallRadius,5);

    /**
     * 根据小圆圆心所在大圆的弧度绘制单个小圆
     */
    function drawSmallCircle(ctx,bigX,bigY,bigRadius,smallRadius,radius){
        ctx.beginPath();

        //小圆的圆心所在大圆的弧度
        //var radius=0.3*Math.PI;
        var h=Math.sin(radius)* bigRadius;

        var b=Math.cos(radius)*bigRadius;

        var x=bigX+b;
        var y=bigY+h;

        ctx.arc(x,y,smallRadius,0,2*Math.PI);
        ctx.fillStyle="pink";
        ctx.fill();

    }

    /**
     * 根据小圆的个数来绘制
     */
    function drawSmallCircles(ctx,bigX,bigY,bigRadius,smallRadius,num){
        //从哪个弧度开始绘制
        var startRadius=0.1*Math.PI;
        //相邻小圆之间的弧度的差值
        var singleRadius=2*Math.PI/num;

        for (var i = 0; i < num; i++) {
            //计算出每一个小圆的圆心所在的弧度值
            var singleRadius2=startRadius+singleRadius*i;
            drawSmallCircle(ctx,bigX,bigY,bigRadius,smallRadius,singleRadius2);
        }
        //第1次for循环：singleRadius=startRadius+singleRadius*0;
        //第2次for循环: singleRadius=startRadius+singleRadius*1;
        //第3次for循环: singleRadius=startRadius+singleRadius*2;
        //第4次for循环: singleRadius=startRadius+singleRadius*3;
        //第5次for循环: singleRadius=startRadius+singleRadius*4;
    }

    /**
     * 根据角度计算弧度
     * @param angle
     * @returns {number}
     */
    function toRadius(angle){
        return angle*Math.PI/180;
    }
</script>
</html>